<html>
  <head>
    <!--CSS file (default YUI Sam Skin) -->
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/menu/assets/skins/sam/menu.css">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/container/assets/skins/sam/container.css" />
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/calendar/assets/skins/sam/calendar.css">

    <link rel="stylesheet" type="text/css" href="/static/stylesheets/datatable.css">
    <link rel="stylesheet" type="text/css" href="/static/stylesheets/main.css" />

    {{title}}
  </head>
  <body class="yui-skin-sam">
  {{header}}

  <b>Completed Next Actions:</b><br />
  <div id="completed_actions" class="grid">
      <table id="actions">
          <thead>
              <tr>
                  <th>Action</th>
                  <th>Category</th>
                  <th>Tag</th>
                  <th>Due Date</th>
                  <th>Completed Date</th>
              </tr>
          </thead>
          <tbody>
          {% for act in completed_actions %}
            <tr>
              <td>{{act.key_action_string}}</td>
              <td>{{act.category_string}}</td>
              <td>{{act.tag}}</td>
              <td>{{act.due_date_string}}</td>
              <td>{{act.complete_date_string}}</td>
            </tr>
          {% endfor %}
          </tbody>
      </table>
  </div>

  {{footer}}

  <!-- YUI COMMON -->
  <!-- Dependencies -->
  <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
  <!-- END YUI COMMON -->

  <!-- YUI MENU -->
  <!-- Dependencies -->
  <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/container/container_core-min.js"></script>

  <!-- Source File -->
  <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/menu/menu-min.js"></script>
  <!-- END YUI MENU -->

  <!-- YUI DATATABLE -->
  <!-- Dependencies -->
  <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"></script>
  <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/datasource/datasource-beta-min.js"></script>

  <!-- Source files -->
  <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/datatable/datatable-beta-min.js"></script>
  <script>
  var actionTable;

  formatDate = function(elCell, oRecord, oColumn, oData) {
    if (oData == "Invalid Date" || oData == "NaN") {
      elCell.innerHTML = "";
    }
    else {
      YAHOO.widget.DataTable.formatDate(elCell, oRecord, oColumn, oData);
    }
  };

  YAHOO.util.Event.addListener(window, "load", function() {
      YAHOO.example.EnhanceFromMarkup = new function() {
          var myColumnDefs = [
              {key:"action", label:"Action", sortable:true, formatter:formatTaskAction},
              {key:"category", label:"Category", sortable:true},
              {key:"tag", label:"Tag", sortable:true},
              {key:"due", label:"Due Date", formatter:formatDate, sortable:true},
              {key:"complete", label:"Completed Date", formatter:formatDate, sortable:true}
          ];

          this.myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("actions"));
          this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
          this.myDataSource.responseSchema = {
              fields: [
                      {key:"action"},
                      {key:"category"},
                      {key:"tag"},
                      {key:"due", parser:YAHOO.util.DataSource.parseDate},
                      {key:"complete", parser:YAHOO.util.DataSource.parseDate}
              ]
          };

          this.myDataTable = new YAHOO.widget.DataTable("completed_actions", myColumnDefs, this.myDataSource,
                  { sortedBy:{key:"complete",dir:"desc"} }
          );
          actionTable = this.myDataTable;

          this.onContextMenuClick = function(p_sType, p_aArgs, p_myDataTable) {
              var task = p_aArgs[1];
              if(task) {
                  // Extract which TR element triggered the context menu
                  var elRow = this.contextEventTarget;
                  elRow = p_myDataTable.getTrEl(elRow);

                  if(elRow) {
                      switch(task.index) {
                          case 0:
                              var oRecord = p_myDataTable.getRecord(elRow);
                              var key = getTaskKey(oRecord.getData("action"));
                              doMarkNotCompleted(key, elRow.id);
                              break;
                      }
                  }
              }
          };
          this.myContextMenu = new YAHOO.widget.ContextMenu("mycontextmenu", {trigger:this.myDataTable.getTbodyEl()});
          this.myContextMenu.addItem("Mark not completed");
          this.myContextMenu.render("completed_actions");
          this.myContextMenu.clickEvent.subscribe(this.onContextMenuClick, this.myDataTable);
      };
  });
  </script>
  <!-- END YUI DATATABLE -->

  <!-- RPC -->
  <script type="text/javascript" src="./static/javascript/json2.js"></script>
  <script type="text/javascript" src="./static/javascript/gtd_rpc.js"></script>
  <script type="text/javascript" src="./static/javascript/gtd_utils.js"></script>
  <script type="text/javascript">
  function doMarkNotCompleted(key, rowId) {
    server.MarkTaskNotComplete(key, rowId, onMarkNotCompleteSuccess);
  }
  
  function onMarkNotCompleteSuccess(response) {
    actionTable.deleteRow(response);
  }
  </script>
  </body>
</html>
